<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:m="http://code.google.com/p/gmaps4jsf/" 
      xmlns:mashup="http://code.google.com/p/mashups4jsf/">

<ui:composition template="../templates/layout.xhtml">

        <ui:define name="title">Mashup Remix - 2</ui:define>
        <ui:define name="ajaxIncludes"></ui:define>
        
        <ui:define name="mashup">
    	<h1>Mashup World Integrated</h1>
    
        <h:form id="form1">

            <h:dataTable id="myTable" var="place" 
                         value="#{theater2.places}"
                         headerClass="tableHeader"
                         columnClasses="tableColumn1, tableColumn2, tableColumn3, tableColumn4"
                         rowClasses="oddRow, evenRow"
                         styleClass="tableStyle">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Short Name" />
                    </f:facet>

                    <h:outputText value="#{place.shortAddressName}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Long Name" />
                    </f:facet>

                    <h:outputText value="#{place.longAddressName}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Postal Code" />
                    </f:facet>

                    <h:outputText value="#{place.postalCode}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="View" />
                    </f:facet>

                    <h:commandLink value="View Place Information" action="#{place.setSelectedPlace}">
                        <f:ajax render=":form1:placeMapWeather :form1:placeTweets :form1:placeVideos"/>
                    </h:commandLink>
                </h:column>
            </h:dataTable>

            <br />
            <h:panelGrid id="grid" columns="3" cellpadding="10px" columnClasses="mashupColumn1, mashupColumn2, mashupColumn3">
                <h:panelGroup id="placeMapWeather">
					<h3><h:outputText value="Place Location on Map:" rendered="#{selectedPlace ne null}"/></h3>
                    
					<m:map width="400px" height="300px" 
                           partiallyTriggered="true"
                           rendered="#{selectedPlace ne null}"
                           address="#{selectedPlace.longAddressName}" zoom="9">
                        <m:marker/>
                        <m:htmlInformationWindow htmlText="#{selectedPlace.longAddressName}"/>
                    </m:map>
					
					<br/>
					<h3><h:outputText value="Place Weather:" rendered="#{selectedPlace ne null}"/></h3>
                    <mashup:yahooWeather locationCode="#{selectedPlace.postalCode}"
                                         rendered="#{selectedPlace ne null}" 
                                         temperatureType="c"/>					
                </h:panelGroup>
				
                <h:panelGroup id="placeTweets">
					<h3><h:outputText value="Tweets that mention the place:" rendered="#{selectedPlace ne null}"/></h3>
			        <mashup:twitterSearchList searchQuery="#{selectedPlace.keyword}" 
			                                  resultItemVar="searchItem" 
											  resultSetSize="5"
			                                  resultItemIndex="index" 
			                                  rendered="#{selectedPlace ne null}">
			                                   
			                <f:facet name="resultItem">
			                    <h:panelGrid columns="2"> 
			                          <h:outputText styleClass="standard_bold" value="Tweet: "/>            <h:outputText styleClass="standard" value="#{searchItem.title}" escape="false"/>
			                          <h:outputText styleClass="standard_bold" value="Author Name: "/>      <h:outputText styleClass="standard" value="#{searchItem.authorName}"/> 
			                          <h:outputText styleClass="standard_bold" value="Publication Date: "/> <h:outputText styleClass="standard" value="#{searchItem.publishDate}"/>
			                          <h:outputText styleClass="standard_bold" value="Author Image: "/>  
			                          <h:outputLink styleClass="standard_bold" value="#{searchItem.authorTwitterURL}">  
			                              <h:graphicImage width="48" height="48" alt="picture of #{searchItem.title}" url="#{searchItem.authorImageURL}"/>
			                          </h:outputLink> 
			                    </h:panelGrid>        
			                </f:facet>
			                
			        </mashup:twitterSearchList>  
                </h:panelGroup>  

                <h:panelGroup id="placeVideos">
					<h3><h:outputText value="Videos that mention the place:" rendered="#{selectedPlace ne null}"/></h3>
				    <mashup:youTubeVideoList searchQuery="#{selectedPlace.keyword}" 
				    						 resultItemVar="searchItem" 
											 maxResults="5"					    						 
				    						 resultItemIndex="index" 
				    						 rendered="#{selectedPlace ne null}">
				      <f:facet name="resultItem">
				           <h:panelGrid columns="2">
				                <h:outputText styleClass="standard_bold" value="Title: "/>           <h:outputText styleClass="standard" value="#{searchItem.title}"/>
				                <h:outputText styleClass="standard_bold" value="Author: "/>          <h:outputText styleClass="standard" value="#{searchItem.author}"/> 
				                <h:outputText styleClass="standard_bold" value="Publication Date: "/><h:outputText styleClass="standard" value="#{searchItem.pubDate}"/>
				                <h:outputText styleClass="standard_bold" value="Video Preview: "/>
				                <h:outputLink styleClass="standard_bold" value="#{searchItem.link}"><h:graphicImage width="48" height="48" alt="preview of #{searchItem.title}" url="#{searchItem.previewURL}"/></h:outputLink>        
				           </h:panelGrid>   
				      </f:facet>
				    </mashup:youTubeVideoList> 
                </h:panelGroup>                 
          				            
            </h:panelGrid>		

        </h:form> 
        </ui:define>

</ui:composition>
</html>  
